<template>
  <div class="info" v-loading="loading">
    <!-- 掘进 -->
    <template v-if="props.params.type === '0'">
      <div class="row">
        <b-cell label="工作面状态" :content="info.currentStatusName" />
        <b-cell label="围岩性质" :content="info.typeDetailName" />
        <b-cell label="掘进方法" :content="info.drivingMethodName" />
      </div>
      <div class="row">
        <b-cell label="设计长度(m)" :content="info.designLen" />
        <b-cell label="断面形状" :content="info.sectionTypeName" />
        <b-cell label="初始里程(m)" :content="info.initDepth" />
      </div>
      <div class="row">
        <b-cell label="巷道类别" :content="info.serviceRangeName" />
        <b-cell label="净断面(㎡)" :content="info.clearSection" />
        <b-cell label="支护方式" :content="info.foreverMethodName" />
      </div>
      <div class="row">
        <b-cell label="坡度(度°)" :content="info.slope" />
        <b-cell label="循环进尺(m)" :content="info.loopDepth" />
        <b-cell label="单班定员(人)" :content="info.workPNum" />
      </div>
      <div class="row">
        <b-cell label="初始掘进日期" :content="info.initWorkDate" />
        <b-cell label="需风量(m'/min)" :content="info.needWind" />
        <b-cell label="所属煤层" :content="info.layerName" />
      </div>
      <div class="row">
        <b-cell label="平均煤厚(m)" :content="info.averageCoalThickness" />
        <b-cell label="煤的密度(t/m3)" :content="info.coalDensity" />
        <b-cell label="煤占巷道断面比例(%)" :content="info.coalOccupiesLanewaySectionRatio" />
      </div>
      <div class="row">
        <b-cell label="循环雷管消耗(发)" :content="info.circulateDetonatorConsume" />
        <b-cell label="循环炸药消耗(kg):" :content="info.circulateDynamiteConsume" />
        <b-cell label="是否智能化工作面" :content="info.isIntelligentWorkFaceName" />
      </div>
      <div class="row">
        <b-cell label="局扇功率(Kw)" :content="info.partFanPower" />
        <b-cell label="区域防突措施" :content="info.measureName" />
        <b-cell label="有效通风断面(㎡)" :content="info.effectiveVentilationTransversals" />
      </div>
    </template>
    <!-- 采面 -->
    <template v-if="props.params.type === '1'">
      <div class="row">
        <b-cell label="工作面状态" :content="info.currentStatusName" />
        <b-cell label="采煤工艺" :content="info.coalTechName" />
        <b-cell label="所属煤层" :content="info.layerName" />
      </div>
      <div class="row">
        <b-cell label="支护方式" :content="info.supportMethodName" />
        <b-cell label="走向长度(m)" :content="info.designLenCm" />
        <b-cell label="采面长度(m)" :content="info.mineFaceLen" />
      </div>
      <div class="row">
        <b-cell label="采高(m)" :content="info.coalHigh" />
        <b-cell label="初始里程(m)" :content="info.initDepth" />
        <b-cell label="煤层倾角(°)" :content="info.dipAngle" />
      </div>
      <div class="row">
        <b-cell label="可采储量(万吨)" :content="info.recAmount" />
        <b-cell label="区域防突措施" :content="info.measureName" />
        <b-cell label="通风方式" :content="info.ventilatedMannerName" />
      </div>
      <div class="row">
        <b-cell label="原始瓦斯含量(m³/t)" :content="info.originalGasAmount" />
        <b-cell label="残余瓦斯含量(m³/t)" :content="info.residueGasAmount" />
        <b-cell label="煤的密度(t/m³)" :content="info.coalDensity" />
      </div>
      <div class="row">
        <b-cell label="循环推进度(m)" :content="info.loopDepth" />
        <b-cell label="单班定员(人)" :content="info.workPNum" />
        <b-cell label="回风巷净断面(m²)" :content="info.clearSection" />
      </div>
      <div class="row">
        <b-cell label="循环炸药消耗(kg)" :content="info.circulateDynamiteConsume" />
        <b-cell label="循环雷管消耗(发)" :content="info.circulateDetonatorConsume" />
        <b-cell label="初始回采日期" :content="info.initWorkDate" />
      </div>
      <div class="row">
        <b-cell label="需风量(m³/min)" :content="info.needWind" />
        <b-cell label="是否智能化工作面" :content="info.isIntelligentWorkFaceName" />
        <b-cell label="有效通风断面(㎡)" :content="info.effectiveVentilationTransversals" />
      </div>
    </template>
    <div class="row">
      <b-cell label="报备时间" :content="info.recordDate" />
    </div>
    <!-- <div class="row">
      <b-cell label="附件">
        <slot> 111 </slot>
      </b-cell>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import BCell from '@/components/b-cell.vue'
import { getJjEngInfoById, getCmEngInfoById } from '@/api/road'
import { onMounted, ref } from 'vue'

const props = defineProps({
  params: {
    type: Object
  }
})

const info = ref({})
const loading = ref(false)
onMounted(async () => {
  loading.value = true
  if (props.params.type === '0') {
    const { data } = await getJjEngInfoById(props.params.engId)
    info.value = data
  } else if (props.params.type === '1') {
    const { data } = await getCmEngInfoById(props.params.engId)
    info.value = data
  }
  loading.value = false
})
</script>
<style scoped lang="scss">
.info {
  position: relative;
  .empty-box {
    position: relative;
    display: flex;

    flex: 1;
    min-width: 150px;
  }
  .row {
    position: relative;
    display: flex;
    gap: calc(16px * var(--scale));
    margin-top: calc(16px * var(--scale));
  }
}
</style>
